<template>
	<div>
		<transition name="slide-up">
			<!-- 菜单栏的阴影 -->
  	  <div class="menu-wrapper" :class="{'hide-box-shadow': !menuVisible || settingVisible >= 0}" v-show="menuVisible">
  	    <div class="icon-wrapper">
  	      <span class="icon-menu" @click="showSetting(3)"></span>
  	    </div>
  	    <div class="icon-wrapper">
  	      <span class="icon-progress" @click="showSetting(2)"></span>
  	    </div>
  	    <div class="icon-wrapper">
  	      <span class="icon-bright" @click="showSetting(1)"></span>
  	    </div>
  	    <div class="icon-wrapper">
  	      <span class="icon-A" @click="showSetting(0)"></span>
  	    </div>
  	  </div>
  	</transition>
		<ebook-setting-font></ebook-setting-font>
		<ebook-setting-font-popup></ebook-setting-font-popup>
		<ebook-setting-theme></ebook-setting-theme>
		<ebook-setting-progress></ebook-setting-progress>
		<ebook-slide></ebook-slide>
	</div>
</template>

<script>
// 引入字体设置组件
import EbookSettingFont from './EbookSettingFont'
// 引入字体设置弹窗组件
import EbookSettingFontPopup from './EbookSettingFontPopup'
import EbookSettingTheme from './EbookSettingTheme'
// 引入进度条组件
import EbookSettingProgress from './EbookSettingProgress'
// 引入目录组件
import EbookSlide from './EbookSlide'
// import { mapGetters } from 'vuex'
import { ebookMixin } from '../../utils/mixin'
export default {
  mixins: [ebookMixin],
  components: {
    EbookSettingFont,
    EbookSettingFontPopup,
		EbookSettingTheme,
		EbookSettingProgress,
		EbookSlide
  },
  methods: {
    showSetting(key) {
      this.setSettingVisible(key)
      // console.log(this.settingVisible)
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	// $ratio: 375 / 10;

	// @function px2rem($px) {
  //   @return $px / $ratio + rem;
	// }

	// @mixin center {
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }

	// @mixin left {
	// 	display: flex;
	// 	justify-content: flex-start;
	// 	align-items: center;
	// }

	// @mixin right {
	// 	display: flex;
	// 	justify-content: flex-end;
	// 	align-items: center;
	// }
	@import "../../assets/styles/global.scss";

	.menu-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 200;
    display: flex;
    width: 100%;
    height: px2rem(48);
    background: white;
    box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, .15);
		font-size: px2rem(20);
    &.hide-box-shadow {
      box-shadow: none;
    }
    .icon-wrapper {
      flex: 1;
      @include center;
      .icon-progress {
        font-size: px2rem(24);
      }
      .icon-bright {
        font-size: px2rem(22);
      }
    }
  }

	// 过渡动画
	.slide-down-enter, .slide-down-leave-to {
  transform: translate3d(0, -100%, 0)
	}
	.slide-down-enter-to, .slide-down-leave, .slide-up-enter-to, .slide-up-leave {
	  transform: translate3d(0, 0, 0)
	}
	.slide-down-enter-active, .slide-down-leave-active, .slide-up-enter-active, .slide-up-leave-active, .fade-enter-active, .fade-leave-active, .slide-right-enter-active, .slide-right-leave-active {
	  transition: all .3s linear;
	}
	.slide-up-enter, .slide-up-leave-to {
	  transform: translate3d(0, px2rem(138), 0)
	}
	.fade-enter, .fade-leave-to {
	  opacity: 0;
	}
	.fade-enter-to, .fade-leave {
	  opacity: 1;
	}
	.slide-right-enter, .slide-right-leave-to {
	  transform: translate3d(-100%, 0, 0);
	}
	// 过渡动画
</style>
